<template>
    <div
        class="circle-rule"
        v-if="ruleMsg.rule"
    >
        <div
            class="circle-rule-position positionFixedCenter"
            :style="{background:`url(${ruleMsg.backImg}) no-repeat center center / cover`}"
        >
            <div class="sure-start-prize positionRCT">
                <h6
                    class="rule-title"
                    v-if="ruleMsg.title"
                    v-html="ruleMsg.title"
                ></h6>
                <div
                    class="rule-content positionR rule-content-scroll"
                    v-if="ruleMsg.rule && ruleMsg.isScorll"
                >
                    <scroller>
                        <div
                            id="ruleContent"
                            v-html="ruleMsg.rule"
                        ></div>
                    </scroller>
                </div>
                <div
                    v-else-if="ruleMsg.rule"
                    class="rule-content positionR"
                    v-html="ruleMsg.rule"
                ></div>
                <span
                    v-if="ruleMsg.isNeedBtn"
                    class="rule-bottom width-full text-center"
                >
                    <span
                        class="sure-start-btn"
                        @click="$emit('closeRule')"
                    >{{ruleMsg.btnText}}</span>
                </span>
                <img
                    v-if="ruleMsg.isNeedCloseBtn"
                    class="rpfr-close-btn"
                    @click="$emit('closeRule')"
                    :src="ruleMsg.closeBtnImg || staticImageUrl('images/close_white_bord.png')"
                    alt=""
                >
            </div>
        </div>
        <v-bord>
            <div
                slot="cantClick"
                @click="$emit('closeRule')"
                class="com_black"
            ></div>
        </v-bord>
    </div>
</template>

<script>
export default {
    name: "RuleModule1",
    props: {
        ruleProp: Object
    },
    data () {
        return {
            ruleMsg: {
                isNeedBtn: true,
                isNeedCloseBtn: true,
                title: '活动规则',
                rule: '',
                btnText: '我知道了',
                addPoint: true,
                isScorll: false,
            }
        }
    },
    mounted: function () {
        let that = this;
        if (that.ruleProp && that.ruleProp.rule && this.ruleProp.addPoint) {
            /*处理换行的问题*/
            let getMatchArray = that.ruleProp.rule.match(/\n/ig);
            if (!that.ruleProp.rule.startsWith('1.')) {
                that.ruleProp.rule = '1.' + that.ruleProp.rule
            }
            if (getMatchArray && getMatchArray.length > 0) {
                getMatchArray.forEach((value, index) => {
                    that.ruleProp.rule = that.ruleProp.rule.replace(value, '<br />');
                })
            }
        }
        /*对视频进行处理*/
        if (that.ruleProp.rule.includes('<video')) {
            that.ruleProp.rule = that.ruleProp.rule.replace('<video', '<video x5-video-player-type="h5" video-player-type="h5" x5-video-player-fullscreen="false"' +
                ' webkit-playsinline="true" x-webkit-airplay="true" x5-playsinline="true" playsinline="true" webkit-playsinline="true" ' +
                'x-webkit-airplay="true" x5-video-orientation="portraint" video-orentation="portraint" style="position:relative;z-index:1061;"');
            // that.ruleProp.rule = that.ruleProp.rule.replace('<video','<video x5-video-player-type="h5" video-player-type="h5" :x5-video-player-fullscreen="false"' +
            //     ' webkit-playsinline="true" x-webkit-airplay="true" x5-playsinline="true" playsinline="true" webkit-playsinline="true" ' +
            //     'x-webkit-airplay="true" x5-video-orientation="portraint" video-orentation="portraint" style="position:relative;z-index:1061;display:none;"');
            //     $('#ruleContent').append(`<div class="video-play-btn video-btn-position">
            //     <img class="video-play-btn-img" id="headerVideoBtn" src="../../../assets/images/common/video_play_btn.png"
            //          @click="videoBtnClick">
            // </div>`)
        }
        this.ruleMsg = Object.assign({}, this.ruleMsg, this.ruleProp);
        $('#headerVideoBtn').click(() => {
        })
        // document.getElementsByTagName('video')[0].addEventListener('play',()=>{
        // })


    },
    methods: {
        videoBtnClick () {
        }
    },
    components: {
        'v-bord': () => import('../../commonComponents/alert/Bord'),
    },
    watch: {
        ruleProp (val) {
            if (val && val.rule && val.addPoint) {
                /*处理换行的问题*/
                let getMatchArray = val.rule.match(/\n/ig);
                if (!val.rule.startsWith('1.')) {
                    valp.rule = '1.' + val.rule
                }
                if (getMatchArray && getMatchArray.length > 0) {
                    getMatchArray.forEach((value, index) => {
                        val.rule = val.rule.replace(value, '<br />');
                    })
                }
            }
            this.ruleMsg = Object.assign({}, this.ruleMsg, val);
        }
    },
}
</script>

<style scoped>
.circle-rule-position {
    width: 0;
    height: 0;
    z-index: 1060;
}
.sure-start-prize {
    width: 3.5rem;
    background-color: #fff;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;
    padding: 0.45rem 0.15rem 0.6rem;
}
.rule-title {
    text-align: center;
    font-size: 0.2rem;
    color: #333;
    padding: 0.15rem;
    border-bottom: dotted #d1d1d1 1px;
}
.rule-content {
    display: inline-block;
    line-height: 0.25rem;
    max-height: 3rem;
    overflow: auto;
    padding-top: 0.05rem;
    position: relative;
}
.rule-content-scroll {
    height: 3.5rem;
    padding: 0 0.15rem;
    width: 100%;
}

.rule-bottom {
    display: inline-block;
    padding-top: 0.65rem;
}
.sure-start-btn {
    display: inline-block;
    width: 2.5rem;
    text-align: center;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    background-color: #ff0f39;
    height: 0.5rem;
    line-height: 0.5rem;
}
.rpfr-close-btn {
    position: absolute;
    bottom: -0.6rem;
    width: 0.44rem;
    height: 0.44rem;
    z-index: 1060;
    left: 0;
    right: 0;
    margin: auto;
}
.video-play-btn-img {
    width: 0.4rem;
    height: 0.4rem;
}
.video-btn-position {
    top: 50%;
    transform: translateY(-50%);
    height: 0.4rem;
    z-index: 1030;
    position: absolute;
    bottom: 0.3rem;
    text-align: center;
}
</style>